<template>
    <div>
        <!-- 总数组件-->
        <div id="zonshuquan">
            <!--设备组件-->
            <div id="zonshu1">
                <TotelCount :ckuang="kuang2" :icon="'el-icon-user-solid'" style="color: orange"></TotelCount>
            </div>
            <!--用户组件-->
            <div id="zonshu2">
                <TotelCount :ckuang="kuang3" :icon="'el-icon-office-building'" style="color: red"></TotelCount>
            </div>
            <!--场所组件-->
            <div id="zonshu4">
                <TotelCount :ckuang="kuang1" :icon="'el-icon-cpu'" style="color: deepskyblue"></TotelCount>
            </div>
        </div>
        <!-- 气温组件-->
        <div id="zhu">
            <!-- 获取互联网近五天天气-->
            <div id="weaterTu">
                <!-- 当前折线图表展示-->
                <QiwenView id="rr"></QiwenView>
            </div>
            <!--获取当前选择场所室内气温-->
            <div id="wendu">
                <!-- 当前折线图表展示-->
                <ECharts v-if="isRouterAlive" ></ECharts>
            </div>
        </div>

    </div>
</template>

<script>
    import axios from "axios";
    import ECharts from "./EchartView"
    import QiwenView from "@/components/QiwenView";
    import TotelCount from "@/components/TotelCount";

    export default {
        name: "ZhuYeView",
        provide() {
            return {
                reload: this.reload
            }
        },
        data() {
            return {
                formLabelWidth: '80px',
                //设置传递到  TotelCount 组件的值
                kuang1: null,
                kuang2: null,
                kuang3: null,
                devices: null,//设备总数
                areas:null,//场所总数
                users: null,//用户总数
                place: "德阳",
                weaterArray: [],
                tem: null,
                isRouterAlive: true,
            }
        },
        components: {
            ECharts,
            QiwenView,
            TotelCount,
        },
        created() {
            console.log(this.place);
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.place).then((response) => {
                    console.log(response)
                    this.weaterArray = response.data.forecast[0]
                }, function (err) {
                    console.log(err + "出错了。。。。。。。。。。。。。。。。")
                }
            )
            //调用方法
            this.deviceCount()
            this.areaCount()
            this.userCount()
        },
        methods: {
            reload() {
                this.isRouterAlive = false;
                this.$nextTick(function () {
                    this.isRouterAlive = true;
                });
            },
            // 以下三个函数分别从后端获取值 为 传递到 TotelCount 组件的变量赋值
            deviceCount() {
                this.api.deviceApi.deviceCount()
                    .then(res => {
                        this.devices = res.data
                        this.kuang1 = ['device', '设备总数', this.devices]
                    })
            },
            areaCount() {
                this.api.areaApi.areaCount()
                    .then(res => {
                        this.areas = res.data
                        this.kuang3 = ['area', '场所总数', this.areas]
                    })
            },
            userCount() {
                this.api.userApi.userCount()
                    .then(res => {
                        this.users = res.data
                        this.kuang2 = ['user', '用户总数', this.users]
                    })
            },
        },
    }
</script>

<style scoped>
    * {
        padding: 0;
        margin: 0;
    }

    #zhu {
        width: auto;
        height: 500px;
        /*background-color: aqua;*/
        box-sizing: border-box;
        position: relative;
        margin: 100px auto;
    }

    #weaterTu {
        width: 46%;
        background-color: white;
        /*box-shadow:3px 6px 5px 5px darkgray;*/
        /*border: 1px solid #d5d4d4;*/
    }

    #wendu {
        width: 48%;
        position: absolute;
        top: 0px;
        left: 53%;
        /*box-shadow:3px 6px 5px 5px darkgray;*/
    }

    #zonshuquan {
        width: 100%;
        height: 100px;
        position: relative;
    }

    #zonshu1 {
        width: 20%;
        height: 100px;
        position: absolute;
        left: 40%;
    }

    #zonshu2 {
        width: 20%;
        height: 100px;
        position: absolute;
        left: 70%;
    }

    #zonshu4 {
        width: 20%;
        height: 100px;
        position: absolute;
        left: 10%;
    }

    #zonshu1:hover {
        width: 21%;
        height: 106px;
        box-shadow: 3px 6px 10px 1px darkgray;
    }

    #zonshu2:hover {
        width: 21%;
        height: 106px;
        box-shadow: 3px 6px 10px 1px darkgray;
    }

    #zonshu4:hover {
        width: 21%;
        height: 106px;
        box-shadow: 3px 6px 10px 1px darkgray;
    }
</style>
